<template>
    <view class="banner-com" :style="[box_style]" v-if="list && list.length > 0">
        <swiper class="screen-swiper square-dot" :style="[banner_style]" :indicator-dots="dots" :circular="true" @change="onSwiperChange"
		 :autoplay="true" interval="5000" duration="500">
			<swiper-item v-for="(item,index) in list" :key="index" @click.stop="preview(item,index)">
				<image class="swiper-image" :src="$imgUrl + item" mode="scaleToFill" :style="[border_radius_style]"  />
				<!-- <video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false" objectFit="cover" v-if="item.type=='video'"></video> -->
			</swiper-item>
		</swiper>
    </view>
</template>

<script setup>

// 常规轮播组件
const { proxy } = getCurrentInstance()

const props = defineProps({
    // 上下边距
    ud_padding: {
        type: [String, Number],
        default: 0
    },
    // 左右边距
    lr_padding: {
        type: [String, Number],
        default: 0
    },
    img_radius: {
        type: [String, Number],
        default: 0
    },
    // 容器高度
    height: {
        type: [String, Number],
        default: 'auto'
    },
    // 数据列表
    list: {
        type: [Array, Object],
        default: []
    },
    // 背景图片
    bg: {
        type: [String],
        default: ''
    },
    // 图片高度
    img_height: {
        type: [String, Number],
        default: 'auto'
    },
    // 定时器
    interval: {
        type: [String, Number],
        default: '3000'
    },
    // 是否自动轮播
    autoplay: {
        type: [Boolean],
        default: true
    },
    dots: {
        type: [Boolean],
        default: true
    }
})
const { interval, autoplay, list, bg } = toRefs(props)

const data = reactive({
    curr: 0
})
const { curr } = toRefs(data)

onMounted(() => {

})

const box_style = computed(() => {
    let style = {
        'height': props.height,
        'padding': `${props.ud_padding}rpx ${props.lr_padding}rpx`
    }
    return style
})

const banner_style = computed(() => {
    let style = {
        'height': `${props.img_height}rpx`,
    }
    return style
})

const border_radius_style = computed(() => {
    let style = { 'border-radius': `${props.img_radius}rpx` }
    return style
})
const emit = defineEmits(['changeSwiper'])

function onSwiperChange(e) {
    data.curr = e.detail.current
    emit('changeSwiper', data.curr)
}


function preview(item, index) {
    let imgs = props.list.map((i)=> proxy.$imgUrl+i)
    uni.previewImage({
        current: index,
        urls: imgs,
        loop: true,
        success: () => {},
        fail: () => {}
    });
}

</script>

<style lang="scss" scoped>
.banner-com {
    width: 100%;
    position: relative;
    margin-top: -2rpx;
    background-color: #fff;
}

.bg {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
}

.screen-swiper {
    width: 100%;
    position: relative;
    z-index: 2;
    min-height: 0;
    .swiper-item {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
    }

    .swiper-image {
        width: 100%;
        height: 100%;
    }
}
</style>
